<template>
<div>
  <Ctyleheader :city="city"></Ctyleheader>
  <Ctyllist :city="city" :letter="letter" :hot="hot"></Ctyllist>
  <rightlist @change="handSucc" :city="city"></rightlist>
</div>
</template>

<script>
import axios from 'axios'
import Ctyleheader from './components/Ctyleheader'
import Ctyllist from './components/Ctyllist'
import rightlist from './components/rightlist'
export default {
  name: 'Ctyl',
  components: {
    Ctyleheader,
    Ctyllist,
    rightlist
  },
  data () {
    return {
      city: {},
      letter: '',
      hot: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/city.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.hot = data.hot
      }
    },
    handSucc (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style>
</style>
